/**********************************************************
 *
 * 组件选中处理函数
 * 1.鼠标单击单选
 * 2.矩形框多选
 * *********************************************************/
import { reactive }  from 'vue'
import { checkByRectCollisionDetection } from 'src/hook/common/useUitil'
import { CPoint } from 'stores/editorModels';
import { useEditorStore } from 'stores/editorStore';

export function useSelectedTuple () {
  //store
  const store = useEditorStore();


  /****************************************************
   * 判断是否选中、全部取消
   * ***************************************************/
  // 判断是否有组件选中
  const isHasSelectedTuple = (comSid: string): boolean => {
    return store.isHasSelectedComponent(comSid);
  };

  //全选
  const selectAllTuple = () => {
    store.addAllSelectedComponents();
  };

  // 清空所有选中项
  const clearSelectedTuple = (): void => {
    store.clearAllSelectedComponents();
  };


  /****************************************************
  * 矩形框选择组件
  * ***************************************************/
  let selectionRect = reactive({ // 记录选择矩形框起始位置
    x: 10,
    y: 10,
    w: 0,
    h: 0
  });

  let startPageXY = <CPoint>{};
  let startOffsetXY = <CPoint>{};

  // 画布上点击鼠标，记录鼠标初始状态
  const setRectSelectionTuple = (ev: MouseEvent) => {
    startOffsetXY.x = ev.offsetX; //鼠标相对于父元素左边位置
    startOffsetXY.y = ev.offsetY;
    startPageXY.x = ev.pageX; //鼠标相对于页面坐标位置，滚动条
    startPageXY.y = ev.pageY;
  };

  // 矩形框选中组件，利用鼠标移动事件
  const getRectSelectionTuple = (ev: MouseEvent): void => {
    let dx = ev.pageX - startPageXY.x;
    let dy = ev.pageY - startPageXY.y;

    // 计算矩形选择框尺寸
    selectionRect.w = Math.abs(dx);
    selectionRect.h = Math.abs(dy);

    // 计算举行选择框坐标
    if (dx > 0 && dy > 0) {
      selectionRect.x = startOffsetXY.x;
      selectionRect.y = startOffsetXY.y;
    } else if (dx > 0 && dy < 0) {
      selectionRect.x = startOffsetXY.x;
      selectionRect.y = startOffsetXY.y + dy;
    } else if (dx < 0 && dy > 0) {
      selectionRect.x = startOffsetXY.x + dx;
      selectionRect.y = startOffsetXY.y;
    } else if (dx < 0 && dy < 0) {
      selectionRect.x = startOffsetXY.x + dx;
      selectionRect.y = startOffsetXY.y + dy;
    }

    // 判断各组件是否在方框内
    let rect = {
      x: selectionRect.x,
      y: selectionRect.y,
      w: selectionRect.w,
      h: selectionRect.h
    };

    // 组件轮询检查
    store.components.forEach((item) => {
      let itemRect = {
        x: item.position.x,
        y: item.position.y,
        w: item.position.w,
        h: item.position.h
      };
      // 在选择框内组件加入选择列表
      if (checkByRectCollisionDetection(rect, itemRect)) {
        store.addSelectedComponent(item.comSid);
      } else {
        store.removeSelectedComponent(item.comSid);
      }
      // 设置画布选中标识
      if (store.selectedList.length > 0) {
        store.setCanvasSelected(false);
      } else {
        store.setCanvasSelected(true);
      }
    });
  };

  // 选择矩形框取消
  const clearRectSelectionTuple = () => {
    selectionRect.w = 0;
    selectionRect.h = 0;
  };


  return {
    selectionRect,
    isHasSelectedTuple,
    clearSelectedTuple,
    selectAllTuple,

    setRectSelectionTuple,
    getRectSelectionTuple,
    clearRectSelectionTuple
  };
}
